<script setup>
import {onMounted, ref, watch} from "vue";
import {setJumpNumber} from "@/assets/js/utils.js";

const props = defineProps({enter: Boolean});
const items = [
  {unit: '+年', s: '专注品牌领域', h: 'YEARS'},
  {unit: '+', s: '服务品牌', h: 'BRANDS'},
  {unit: '个', s: '服务覆盖国家', h: 'COUNTRIES'}
]
const state = ref({
  years: 0,
  brands: 0,
  countries: 0,
})

onMounted(() => {
  watch(() => props.enter, (n) => {
    if (n) {
      setTimeout(() => {
        setJumpNumber(0, 13, (num) => {
          state.value.years = num;
        });
        setJumpNumber(0, 230, (num) => {
          state.value.brands = num;
        });
        setJumpNumber(0, 58, (num) => {
          state.value.countries = num;
        });
      }, 500)
    }
  })
})
</script>

<template>
  <view class="container">
    <view class="column" v-if="enter">
      <view class="font190 inter">GLOBAL BRAND</view>
      <view class="font60" style="color: white;">为中国品牌出海保驾护航</view>
      <view class="row top8" style="justify-content: right;">
        <view class="column item" v-for="(item, i) in items">
          <view class="row" style="align-items: center;">
            <view class="title font120" :style="{width: i === 1 ? '80%' : '55%'}">
              {{ i === 0 ? state.years : i === 1 ? state.brands : state.countries }}
            </view>
            <view class="unit font56">{{ item.unit }}</view>
          </view>
          <view class="ser font36">{{ item.s }}</view>
          <view class="hint font38">{{ item.h }}</view>
        </view>
      </view>
      <view class="ship d3s">
        <img src="../../assets/icons/icon_ship.png" alt="" width="10%">
      </view>
      <view class="ship-line"></view>
    </view>
  </view>
</template>

<style scoped>
.container {
  height: calc(100vw * (1260 / 1920));
  background-image: url("https://neocross.oss-cn-beijing.aliyuncs.com/sky/h5pic/img_index_water.png");

  .font190, .font60 {
    color: #ffffff29;
    margin: 0 auto;
  }

  .item {
    margin-left: 15%;

    .title {
      color: #00c6f7;
      cursor: pointer;
      font-weight: 600;
    }

    .unit {
      margin-left: 12%;
    }

    .ser {
      font-weight: 400;
    }

    .hint {
      color: rgba(255, 255, 255, 0.2);
      font-weight: 400;
    }
  }

  .ship {
    animation-delay: 3s;
    transform: translateX(100%);
    animation: rightInFull 3s ease-in-out forwards;
    z-index: 1;
  }

  .ship-line {
    width: 200%;
    height: 1px;
    margin-top: -0.6%;
    background-color: #315058
  }
}
</style>